<template>
	<view class="container">
		<!-- // 默认地址 -->
		<view class="address">
			<view class="addressContent">
				<view class="iconfont icon-address"></view>
				<view class="addressContentTitle">
					<text>{{defalutAddress.name}}</text>
					<text>{{defalutAddress.tel}}</text>
					<view>{{defalutAddress.addr_text + defalutAddress.detail}}</view>
				</view>
			</view>
			<view class="iconfont icon-xiangyoujiantou" @click="navTo('/pages/deliveryAddress/deliveryAddress')"></view>
		</view>
		<view class="orderContent">
			<view class="ocItem" v-for="order in orderDefault.goods" :key="order.name">
				<image :src="order.img"></image>
				<view class="ocItemBox">
					<view class="ocItemTitle">{{order.name}}</view>
					<view class="ocItemTag">
						<text>{{order.attr}}</text>
					</view>
					<view class="ocItemPrice">
						<view>￥{{order.price}}</view>
						<view>
							<text>X</text>
							<text>{{order.num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orderCT"> 
			<view class="orderCTItem">
				<view>商品金额</view>
				<view>￥{{orderDefault.all_amount}}</view>
			</view>
			<view class="orderCTItem">
				<view>优惠金额</view>
				<view>无优惠</view>
			</view>
			<view class="orderCTItem">
				<view>运费</view>
				<view>包邮</view>
			</view>
			<view class="orderCTItem">
				<view>备注</view>
				<input v-model="submitParams.desc" type="text" placeholder="请输人备注信息" placeholder-style="color: '#ccc'">
			</view>
		</view>
		<view class="footer">
			<view class="footerTotal">
				<view>
					总计
				</view>
				<view >
					<text>￥</text>
					<text>{{orderDefault.all_amount}}</text>
				</view>
			</view>
			<view class="footerBtn" @click="submitOrder">提交订单</view>
		</view>
	</view>
</template>

<script setup>
	import { order } from '@/api'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue'
	import { userStore } from '@/stores/userInfo/userInfo'
	import { getToken } from '@/utils/localStoreToken'
	// 默认地址
	let defalutAddress = reactive({
		name: '',
		addr_code: [],
		addr_text:'',
		detail: '',
		is_default: true,
		tel: '',
		uid: '',
		_id:''
	})
	// 创建订单的参数
	let checkOrderParams = reactive({
		uid: '',
		cart_id: '',
		token: '',
		type:''
	})
	//获取创建订单
	let orderDefault = reactive({
		all_amount: 0,
		base_money: 0,
		goods: [],
		reduction: 0,
		shipping: 0
	})
	
	// 提交订单需要的参数
	const submitParams = reactive({
		uid: '',
		cart_id: '',
		desc: '',
		address: {}
	})
	// 提交订单
	async function submitOrder() {
		// uid
		submitParams.uid = defalutAddress.uid
		// cart_id
		submitParams.cart_id = checkOrderParams.cart_id
		// address
		submitParams.address = defalutAddress
		
		// 确定订单
		order.reqSubmitOrder(submitParams).then(res => {
			if(res.code === 1) {
				let user = userStore()
				user.changeUpdateShopCart()
				let orderId = encodeURI(JSON.stringify(res.data))
				uni.navigateTo({
					url: `/pages/payPages/payPages?orderId=${orderId}`
				})
			}
		})
	
	}
	// 获取默认地址
	function getDefaultAddress() {
		order.reqGetDefaultAddr({ uid: checkOrderParams.uid }).then(res => {
			if(res.code === 1) {
				defalutAddress.name = res.data[0].name
				defalutAddress.addr_code = res.data[0].addr_code
				defalutAddress.addr_text = res.data[0].addr_text
				defalutAddress.detail = res.data[0].detail
				defalutAddress.is_default = res.data[0].is_default
				defalutAddress.tel = res.data[0].tel
				defalutAddress.uid = res.data[0].uid
				defalutAddress._id = res.data[0]._id
			}
		})
	}
	// 获取订单信息
	function getCheckOrder() {
		order.reqCheckOrder(checkOrderParams).then(res =>{
			if(res.code === 1) {
				orderDefault.all_amount = res.data.all_amount.toFixed(2)
				orderDefault.base_money = res.data.base_money.toFixed(2)
				orderDefault.goods = res.data.goods
				orderDefault.reduction = res.data.reduction
				orderDefault.shipping = res.data.shipping
			}
		})
	}
	// 跳转到选择默认地址
	function navTo(url) {
		uni.navigateTo({
			url
		})
	}
	// 获取
	onLoad( async (options) => {
		checkOrderParams.token = await getToken()
		let cart_id = JSON.parse(decodeURI(options.cart_id))
		if(typeof cart_id === 'string'){
			checkOrderParams.cart_id = cart_id
		}else{
			checkOrderParams.cart_id = cart_id.join(',')
		}
	})
	// 每次页面显示
	onShow(async () => {
		let user = userStore()
		try{
			await user.getUserInfo()
			defalutAddress.uid = user.userInfo._id
			checkOrderParams.uid = user.userInfo._id
			getDefaultAddress()
			getCheckOrder()
		}catch(err) {
			console.log(err)
		}
	})
</script>

<style scoped lang="scss">
	.container{
		min-height: calc(100vh - 90rpx);
		padding-bottom: 110rpx ;
	}
	.address{
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		background-color: #fff;
		.iconfont {
			font-size: 35rpx;
		}
		.addressContent{
			width: 100%;
			display: flex;
			align-items: center;
			.addressContentTitle{
				margin-left: 15rpx;
				text:first-child{
					font-size: 35rpx;
					margin-right: 15rpx;
				}
				view{
					margin-top: 20rpx;
					color: #ccc;
				}
			}
		}
		&::after{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 5rpx;
			background:url('../../../static/images/cart/addr_line.png') no-repeat left;
		}
	}

	.orderContent{
		padding: 20rpx 35rpx;
		background-color: #fff;
		.ocItem{
			padding: 20rpx 0;
			display: flex;
			align-items: flex-start;
			border-bottom: 1rpx solid #ccc;
			image{
				width: 200rpx;
				height: 200rpx;
				margin-right: 10rpx;
			}
		}
		.ocItemBox{
			flex: 1;
			.ocItemTitle{
				font-size: 30rpx;
				white-space: pre-wrap;
				font-weight: 550;
			}
		}
		.ocItemTag{
			font-size: 15rpx;
			margin: 5rpx 0;
			text{
				color: #ccc;
				margin-right:10rpx;
			}
		}
		.ocItemPrice{
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			view{
				font-size: 30rpx;
				&:first-child{
					font-size: 35rpx;
					color: #fdd100;
				}
				&:last-child{
					text:first-child{
						font-size: 15rpx ;
						transform: scale(0.8);
						display: inline-block;
					}
				}
			}
		}
	
		
	}

	.orderCT{
		margin-top: 15rpx;
		padding: 10rpx 30rpx;
		background-color: #fff;
		.orderCTItem{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx #eee solid;
			view:first-child{
				font-size: 30rpx;
				color: #ccc;
				width: 150rpx
			}
			&:nth-child(2){
				view:last-child{
					color: #fdd100;
				}
			}
			&:last-child{
				border: none;
				justify-content: flex-start;
				input{
					font-size: 30rpx;
				}
			}
		}
	}
	.footer{
		box-shadow: 0 0 5px #ccc;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		justify-items: center;
		background-color: #fff;
		.footerTotal{
			line-height: 100rpx;
			display: flex;
			align-items: baseline;
			margin-left: 30rpx;
			view:last-child{
				font-size: 40rpx;
				color: #fdd100;
				text:first-child{
					font-size: 30rpx;
				}
			}
		}
		.footerBtn{
			line-height: 100rpx;
			color: #fff;
			background-color: #fdd100;
			padding: 0 100rpx;
			&:active{
				opacity: 0.5;
			}
		}
	}
</style>